<template>
  <div class="cash">
    <!--头部-->
    <div class="head">
      <el-form ref="form" :inline="true" :model="selectForm" label-width="100px">
        <el-form-item label="用户昵称">
          <el-input v-model="selectForm.nickname" placeholder="请输入用户名称"/>
        </el-form-item>
        <el-form-item label="提现申请状态">
          <el-select v-model="selectForm.manner" placeholder="请选择">
            <el-option label="待审" value="0"></el-option>
            <el-option label="无效" value="1"></el-option>
            <el-option label="驳回" value="2"></el-option>
            <el-option label="通过" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="select">查 询</el-button>
          <el-button @click="selectCancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--表格-->
    <div class="body">
      <el-table
        v-loading="isLoading"
        :stripe="true"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="nickname"
          label="用户昵称"
          align="center"
        />
        <el-table-column
          prop="account"
          label="提现金额"
          align="center"
        />
        <el-table-column
          label="提现申请状态"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.manner === 0" type="info">待审</el-tag>
            <el-tag v-else-if="scope.row.manner === 1" type="=warning">无效</el-tag>
            <el-tag v-else-if="scope.row.manner === 2" type="=danger">驳回</el-tag>
            <el-tag v-else-if="scope.row.manner === 3" type="=success">通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="gmt_create"
          label="创建时间"
          align="center"
        >
          <template slot-scope="scope">{{ scope.row.gmt_create | dateFormat }}</template>
        </el-table-column>

        <el-table-column
          prop="name"
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="success" @click="checkGamer(scope.row)">查看用户详情</el-button>
            <el-button v-if="scope.row.manner === 2 || scope.row.manner === 3" type="primary" @click="checkAudit(scope.row)">查看</el-button>
            <el-button v-else type="success" @click="audit(scope.row)">审核</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="body-page">
        <el-pagination
          :current-page="1"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!--  审核弹出框  -->
    <el-dialog title="审核" :visible.sync="auditDialogVisible" width="600px">
      <el-form :model="auditDialogForm" ref="auditForm" :rules="auditFormRules">
        <el-form-item label="审核结果" prop="manner">
          <el-select :disabled="isCheck" v-model="auditDialogForm.manner" placeholder="审核结果">
            <el-option label="通过" value="3"></el-option>
            <el-option label="驳回" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核意见" prop="result">
          <el-input
            :disabled="isCheck"
            style="width: 450px"
            type="textarea"
            :rows="4"
            placeholder="请输入通过/驳回理由"
            v-model="auditDialogForm.result">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="auditFormCancel">取 消</el-button>
        <el-button v-show="!isCheck" type="primary" @click="auditFormSubmit('auditForm')">确 定</el-button>
      </div>
    </el-dialog>

<!--用户信息弹出框-->
    <el-dialog title="用户信息" :visible.sync="checkDialogVisible" width="600px">
      <el-form :model="checkDialogForm" >
        <el-form-item label="昵称：" prop="result" label-width="90px">
          <el-input :disabled="true" style="width: 400px" v-model="checkDialogForm.nickname" placeholder="暂无信息"></el-input>
        </el-form-item>
        <el-form-item label="年龄：" prop="result" label-width="90px">
          <el-input :disabled="true" style="width: 400px" v-model="checkDialogForm.age" placeholder="暂无信息"></el-input>
        </el-form-item>
        <el-form-item label="性别：" prop="result" label-width="90px">
          <el-input :disabled="true" style="width: 400px" v-model="checkDialogForm.sex" placeholder="暂无信息"></el-input>
        </el-form-item>
        <el-form-item label="账户余额：" prop="result" label-width="90px">
          <el-input :disabled="true" style="width: 400px" v-model="checkDialogForm.account_money" placeholder="暂无信息"></el-input>
        </el-form-item>

      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {getCash, auditCash, searchCash} from "@/api/cash";
import {getToken, getUserInfo} from "@/utils/auth";
import {getUserById} from "@/api/user";

export default {
  name: "index",
  async created() {
    await this.fetch(this.page.currentPage, this.page.pageSize)
  },
  data() {
    return {
      isSelect: false,
      isLoading: true,
      isCheck:false,
      tableData: [],

      selectForm: {},

      //审核弹出框
      auditDialogVisible: false,
      auditDialogForm: {},
      auditFormRules: {
        manner: [
          {required: true, message: '审核结果不能为空', trigger: 'blur'},
        ],
        result: [
          {required: true, message: '审核意见不能为空', trigger: 'blur'},
        ],
      },

      //用户信息弹出框
      checkDialogVisible:false,
      checkDialogForm: {},
      //分页相关
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      }
    }
  },

  methods: {
    async fetch(page, size) {
      this.isLoading = true
      const res = await getCash({page, size})
      this.tableData = JSON.parse(JSON.stringify(res.data.cashOuts.records))
      this.page.total = res.data.cashOuts.total
      this.isLoading = false

      console.log(res)
    },

    //查询相关
    async select(event, page = 1, size = 10) {
      if (Object.values(this.selectForm).length == 0) {
        this.$message({
          type: 'warning',
          message: '查询条件为空'
        });
      } else {
        console.log(page);
        this.isLoading = true
        this.page.currentPage = 1
        this.page.pageSize = 10
        this.isSelect = true
        const res = await searchCash(this.selectForm, {page, size})
        this.tableData = JSON.parse(JSON.stringify(res.data.cashOuts.records))
        this.isLoading = false
      }
    },
    async selectCancel() {
      this.selectForm = {}
      await this.fetch(this.page.currentPage, this.page.pageSize)
    },

    //表格相关
    async checkGamer(row) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      const res = await getUserById(row.f_user_id)
      console.log(res)
      this.checkDialogForm = JSON.parse(JSON.stringify(res.data))
      this.checkDialogVisible = true
      loading.close()
    },
    checkAudit(row) {
      this.isCheck = true
      this.auditDialogVisible = true
      this.auditDialogForm = JSON.parse(JSON.stringify(row))
    },
    audit(row) {
      this.auditDialogVisible = true
      this.auditDialogForm = JSON.parse(JSON.stringify(row))
      console.log(row)
    },

    //翻页相关
    async handleSizeChange(pageSize) {
      if (this.isSelect) {
        await this.select(this.page.currentPage, pageSize)
      } else {
        await this.fetch(this.page.currentPage, pageSize);
      }

    },
    async handleCurrentChange(currentPage) {
      if (this.isSelect) {
        await this.select(currentPage, this.page.pageSize)
      } else {
        await this.fetch(currentPage, this.page.pageSize)
      }
    },

    //审核弹出框相关
    auditFormSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('审核一旦确定，将无法更改，是否继续操作？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {

            console.log(this.auditDialogForm, '这是数据')
            let manner
            if (this.auditDialogForm.manner === '3')
              manner = '通过'
            else if (this.auditDialogForm.manner == '2')
              manner = '驳回'


            const res = await auditCash({
              id: this.auditDialogForm.id,
              processor: JSON.parse(getUserInfo()).name,
              type: '9',
              result: this.auditDialogForm.result,
              manner: this.auditDialogForm.manner,
              account: this.auditDialogForm.account,
            })

            this.$message({
              type: 'success',
              dangerouslyUseHTMLString: true,
              message: `审核成功，审核状态为: <span v-show="this.auditDialogForm.manner === '3'" style="color: #0050f1" > ${manner}</span>`
            });
            this.auditDialogVisible = false
            this.auditDialogForm = {}
            console.log(res, '结果')

            this.auditDialogForm = {}
          }).catch(() => {
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    auditFormCancel() {
      this.auditDialogForm = {};
      this.auditDialogVisible = false
      this.isCheck = false
    }
  },


}
</script>

<style lang="scss" scoped>
.cash {
  padding: 10px;
  min-height: 100vh;

  .head {
    display: flex;
    justify-content: space-between;
    background-color: white;
    margin-top: 10px;
    padding: 30px 10px 10px 10px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    .head-btn {
      margin-right: 10px;
    }
  }

  .body {
    padding: 20px 0px;
    background-color: white;
    margin-top: 20px;
    //padding: 10px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    .body-page {
      text-align: center;
      margin-top: 30px;
    }
  }
}
</style>
